<!--
 * @Author: 赖钊亮
 * @Description: 个人中心头部
 * @Date: 2020-06-28 09:49:33
 * @LastEditTime: 2020-07-07 14:31:17
 * @LastEditors: Please set LastEditors
 * @FilePath: \mobile_item_121e:\靖凯商场\jingkai_shopping_mall\jkshooping\src\pages\user\components\head.vue
--> 
<template>
  <div>
    <div class="head">
      <div class="user">
        <!-- 消息 -->
        <div class="xiaoxi">
          <router-link to="/message">
            <div class="msg">
              <van-icon name="chat-o" size="24" badge="2" class="icon" color="#ffffff"/>
            </div>
          </router-link>
        </div>
        <!-- 头像登录 -->
        <template v-if="token">
          <!-- 有token时的状态 -->
          <van-row>
            <van-col span="7">
              <div class="headimg">
                <!-- 头像 -->
                <div class="Himg">
                  <div class="Himg1">
                    <!-- <van-icon name="contact" /> -->
                    <van-image :src="this.vip.avatar" round />
                  </div>
                </div>
              </div>
            </van-col>
            <!-- 信息 -->
            <van-col span="8">
              <div class="text">
                <p class="text1">{{this.vip.username}}</p>
                <p class="text2">会员等级:2</p>
              </div>
            </van-col>
            <!-- 登录注册按钮 -->
            <van-col span="8">
              <div class="btn">
                <!--<van-button type="default" to="/sign">登录 / 注册</van-button> -->
                <van-icon name="setting-o" @click="system" />
              </div>
            </van-col>
          </van-row>
        </template>

        <template v-else>
          <van-row>
            <van-col span="7">
              <div class="headimg">
                <!-- 头像 -->
                <div class="Himg">
                  <div class="Himg1">
                    <van-icon name="contact" />
                  </div>
                </div>
              </div>
            </van-col>
            <!-- 信息 -->
            <van-col span="8">
              <div class="text">
                <p class="text1">未登录</p>
                <p class="text2">会员等级:-</p>
              </div>
            </van-col>
            <!-- 登录注册按钮 -->
            <van-col span="8">
              <div class="btn">
                <van-button type="default" to="/sign">登录 / 注册</van-button>
              </div>
            </van-col>
          </van-row>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState } = createNamespacedHelpers("userModule");
import * as api from "@/api/apiList/user/user.js";
export default {
  data() {
    return {
      vip: "",
      levels: ""
    };
  },
  computed: {
    // token
    ...mapState(["token"])
  },
  methods: {
    // 跳转到账号设置界面
    system() {
      this.$router.push("/system");
    },
    // 获取用户信息
    async API_user_info() {
      return await api.user_info();
    }
  },
  // 获取用户信息
  async created() {
    let res = await api.user_info();
    if (res.data.code === 200) {
      this.vip = res.data.data.user;
      this.levels = res.data.data.user.levels;
    }
  }
};
</script>

<style lang="scss" scoped>
.head {
  .user {
    background-color: rgb(238, 114, 114);
    width: 100%;
    height: 150px;
    .xiaoxi {
      .van-icon {
        margin-left: 320px;
        margin-top: 10px;
      }
    }
    .headimg {
      width: 100%;
      .Himg {
        background-color: rgb(243, 243, 243);
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin-left: 30px;
        .Himg1 {
          background-color: rgb(238, 236, 236);
          width: 40px;
          height: 40px;
          border-radius: 50%;
          position: absolute;
          left: 40px;
          top: 52px;
          .van-icon {
            display: block;
            color: white;
            font-size: 20px;
            text-align: center;
            line-height: 30px;
          }
        }
      }
    }
  }
  .text {
    margin-top: 10px;
    color: white;
    .text1 {
      margin-bottom: 5px;
      font-size: 16px;
    }
    .text2 {
      width: 50%;
    }
  }
  .btn {
    margin-top: 10px;
    .van-button {
      border-radius: 10px;
      color: rgb(252, 120, 120);
    }
    .van-icon {
      margin-left: 70px;
      margin-top: 10px;
      color: white;
      font-size: 30px;
    }
  }
}
</style>